<template>
	<view class="content">
        <!-- 步骤条 -->
        <u-steps class="forget-password-steps" :current="current" style="margin-top:174rpx">
            <u-steps-item title="第一步" desc="验证手机号" iconSize="48" activeColor="#333" inactiveColor="#eee">
                <u--image slot="icon" v-if="current==1" :showLoading="true" src="/static/login/yes.png" width="52rpx" height="52rpx" />
            </u-steps-item>
            <u-steps-item title="第二步" desc="修改密码成功" iconSize="48" activeColor="#333" inactiveColor="#eee">
                <text slot="icon" v-if="current==0" class="slot-icon u-flex u-row-center u-font-26 font-bold">2</text>
            </u-steps-item>
        </u-steps>

        <!-- 第一步 -->
        <view v-if="current==0" class="u-m-t-100">
            <view class="form">
                <view class="u-font-48 font-bold">验证手机</view>
                <view class="u-m-t-10 u-font-24">请完善以下信息,立即激活账号</view>
                <u--form class="u-m-t-66" labelPosition="left" :model="form" :rules="rules" ref="form">
                    <u-form-item label="" prop="phone" borderBottom ref="phone">
                        <u-input v-model="form.phone" type="number" clearable border="none" 
                            placeholder="手机号" placeholderClass="uni-placeholder">
                            <view slot="suffix" class="code u-p-l-30 u-font-28 uni-gery-color" @tap="getCode">{{codeTxt}}</view>
                        </u-input>
                    </u-form-item>
                    <u-form-item label="" prop="code" borderBottom ref="code" class="u-m-t-20">
                        <u--input v-model="form.code" clearable border="none" 
                            placeholder="请输入验证码" placeholderClass="uni-placeholder">
                        </u--input>
                    </u-form-item>
                    <u-form-item label="" prop="password" borderBottom ref="password" class="u-m-t-20">
                        <u--input v-model="form.password" clearable border="none"
                            placeholder="请输入密码" placeholderClass="uni-placeholder"
                            :password="form.showPassword" 
                            :suffixIcon="form.showPassword?'eye-fill':'eye-off'" 
                            @icon="form.showPassword=!form.showPassword">
                        </u--input>
                    </u-form-item>
                    <u-form-item label="" prop="affirmPassword" borderBottom ref="affirmPassword" class="u-m-t-20">
                        <u--input v-model="form.affirmPassword" clearable border="none"
                            placeholder="请再次输入密码" placeholderClass="uni-placeholder"
                            :password="form.showAffirmPassword" 
                            :suffixIcon="form.showAffirmPassword?'eye-fill':'eye-off'" 
                            @icon="form.showAffirmPassword=!form.showAffirmPassword">
                        </u--input>
                    </u-form-item>
                </u--form>
            </view>
            <view class="u-m-t-60 u-flex">
                <u-button class="cancel" shape="circle" text="取消" @tap="click(0)"></u-button>
                <u-button type="primary" style="width:296rpx" shape="circle" text="下一步" @tap="click(1)"></u-button>
            </view>
        </view>

        <!-- 第二步 -->
        <view v-else style="margin-top:338rpx">
            <view class="u-flex u-row-center">
                <u--image :showLoading="true" src="/static/login/success.png" width="544rpx" height="456rpx"></u--image>
            </view>
            <view class="u-flex u-row-center u-m-t-42">
                <u--image :showLoading="true" src="/static/login/yes.png" width="48rpx" height="48rpx"></u--image>
                <text class="u-font-32 font-bold u-m-l-20">修改成功,请立即登录。</text>
            </view>
            <u-button class="u-m-t-100" style="width:500rpx" type="primary" shape="circle" text="登陆" @tap="goLogin"></u-button>
        </view>

        <!-- 提示组件 -->
        <u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                current: 0,
                countDown: 60,
                codeTxt:'获取验证码', 
                form: {
                    phone: '',
                    code: '',
                    password: '',  
                    affirmPassword: '',
                    showPassword: true, 
                    showAffirmPassword: true, 
                },
                rules: {
                    'phone': [
                        {
                            required: true,
                            validator: (rule, value, callback) => {
                                return uni.$u.test.mobile(value)
                            },
                            message: '请输入正确格式的手机号码',
                            trigger: ['blur', 'change']
                        },
                    ],
                    'code': {
                        required: true,
                        message: '请输入验证码',
                        trigger: ['blur', 'change'],
                    },
                    'password': {
                        required: true,
                        min: 6,
                        message: '最少6个字符',
                        trigger: ['blur', 'change'],
                    },
                    'affirmPassword': {
                        required: true,
                        validator: (rule, value, callback) => {
                            return this.form.password == value
                        },
                        message: '两次输入的密码不一致',
                        trigger: ['blur', 'change']
                    },
                },
			}
		},
		onLoad() {

		},
		methods: {
            // 获取验证码
            getCode(){
                if( this.countDown == 60 ){
                    if( !(/^1[3456789]\d{9}$/.test(this.form.phone)) ){ 
                        this.$refs.uToast.show( {type:'warning', message:'请输入正确格式的手机号码'} )
                    }else{
                        const parameter = {
                            ywbh: uni.getStorageSync("userInfo").acc,  // 用户账号【必传】
                            jssjh: this.form.phone, // 用户联系电话【必传】
                        }
                        uni.showLoading({ title:'验证码获取中' })
                        this.$request(this,this.$apis.getCode,parameter).then(res=>{
                            this.countDownFn()
                        }).then()
                    }
                }
            },
            // 倒计时
            countDownFn(){
                this.$tools.uToast(this, 'success','', '验证码已发送至'+this.form.phone+'请注意查收' )
                const timer = setInterval(() => {
                    if( this.countDown == 0 ){
                        clearInterval( timer )
                        this.countDown = 60
                        this.codeTxt = '获取验证码'
                    }else{
                        this.countDown --
                        this.codeTxt = this.countDown<10?'0'+this.countDown+'s后重新发送':this.countDown+'s后重新发送'
                    }
                }, 1000)
            },

            // 取消&下一步
            click(type){
                if( type == 0 ){
                    uni.reLaunch({
                        url: '/pages/login/login'
                    })
                }else{
                    this.$refs.form.validate().then(res => {
                        uni.$u.toast('校验通过')
                        this.current = 1
                    }).catch(errors => {})
                }
            },

            // 去登陆
            goLogin(){
                uni.reLaunch({
                    url: '/pages/login/login'
                })
            },
		}
	}
</script>

<style lang="scss">
	.content {
        height: 100vh;
        padding: 0 66rpx;
        background: url('/static/login/bg1.png');
        .slot-icon{
            width: 44rpx;
            height: 44rpx;
            border: 1rpx solid #dfdfdf;
            color: #dfdfdf;
            border-radius: 100%;
        }
        .code{
            height: 48rpx;
            line-height: 48rpx;
            border-left: 1rpx solid rgb(214, 215, 217);
        }
        .cancel{
            width: 296rpx; 
            background: #F6F7F8;
            color: #ADB4BD;
            border: none
        }
	}
</style>
